<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/forgetpwd.css">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<title>魔豆素材网</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header-login w-m clearfix">
			<div class="left">
				<img src="./img/logo.png" alt="" srcset="">
				<span>登录</span>
			</div>
			<div class="right">
				<p><a href="modou.html">返回首页</a></p>
			</div>
		</div>
		<!-- 登录注册 -->
		<div class="banner">
			<div class="bwrap w-m">
				<!-- 左侧广告 -->
				<div class="bwrap-left">
					<h2>魔豆素材网</h2>
					<p>海量原创素材<span>现已上线</span></p>
				</div>
				<div class="login">
					<div class="tab">
						<div class="tlogin on">登录</div>
						<div class="tregister">注册</div>
					</div>
					<!-- 登录 -->
					<form action="" id="login">
						<div class="showblock" id="showblock1">
							<div class="tel">
								<span>用户名</span>
								<input type="text" name="" id="username" placeholder="手机号码或邮箱">
							</div>
							<div class="tel">
								<span>密码</span>
								<input type="password" name="" id="pwd" placeholder="请输入6-16位密码">
							</div>
							<div class="tuyzm">
								<input type="text" name="" id="tpyzm" placeholder="输入图片验证码">
								<!-- 验证码图片 -->
								<img class="code" id="changeCode" src="./img/yzm.png" alt="">
							</div>
							<div class="btn" id="loginbt">
								立即登录
							</div>
							<p><a href="forgetpwd.html">忘记密码？</a></p>
						</div>
					</form>
					<!-- 注册 -->
					<form action="" id="reg">
						<div class="showblock" id="showblock2" style="display: none">
							<div class="tel">
								<span>用户名</span>
								<input type="text" name="" id="zcusername" placeholder="手机号码或邮箱">
							</div>
							<div class="tel">
								<span>密码</span>
								<input type="password" name="" id="zcpwd" placeholder="请输入6-16位密码">
							</div>
							<div class="tel">
								<span>确认密码</span>
								<input type="password" name="" id="zcrepwd" placeholder="请重复你设定的密码">
							</div>
							<div class="tel">
								<span>邮箱</span>
								<input type="text" name="" id="zcemail" placeholder="用于重置密码的邮箱">
							</div>
							<div class="tel">
								<span>昵称</span>
								<input type="text" name="" id="zcname" placeholder="请输入你的昵称">
							</div>
							<div class="tuyzm">
								<input type="text" name="" id="tpyzm1" placeholder="输入图片验证码">
								<!-- 验证码图片 -->
								<img class="code" id="changeCode2" src="./img/yzm.png" alt="">
							</div>
							<div class="btn" id="regbt">
								立即注册
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<footer class="footer">
			<ul class="nav">
				<li><a href="">关于我们</a></li>
				<li><a href="">友情链接</a></li>
				<li><a href="">个人会员版</a></li>
				<li><a href="">隐私协议</a></li>
				<li><a href="">服务条款</a></li>
				<li><a href="">联系我们</a></li>
				<li><a href="">加入我们</a></li>
			</ul>
			<p class="flink">
				<a href="">联合推广 market@163.com</a>
				<a href="">友链交换 market@163.com</a>
			</p>
			<p class="ewm"><img src="img/ewm.png"></p>
			<a href="" class="beian">Copyright © 2017 MIUI 京ICP备10046444号 | 京公网安备11010802020134号 | 京ICP证110507号</a>
		</footer>
		<script src="layui/layui.js"></script>
		<script>
			// 登录注册切换
			var $1 = obj => document.querySelector(obj);
			var oTlogin = $1('.tlogin');
			var oRregister = $1('.tregister');
			oTlogin.onclick = function() {
				this.classList.add('on');
				oRregister.classList.remove('on')
				$1("#showblock1").style.display = 'block';
				$1("#showblock2").style.display = 'none';
			}
			oRregister.onclick = function() {
				this.classList.add('on');
				oTlogin.classList.remove('on')
				$1("#showblock1").style.display = 'none';
				$1("#showblock2").style.display = 'block';
			}
		
			/*校验手机号码是否合法 */
			function isTelCode(str) {
				var reg= /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
				return reg.test(str);
			}
			/*校验邮件地址是否合法 */
			function IsEmail(str) {
				var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				return reg.test(str);
			}
			/*校验6-16位密码 */
			function IsPwd(str) {
				var reg=/\S{6,16}/;
				return reg.test(str);
			}
			// layui框架
			layui.use(['jquery','layer'], function(){
				var $ = layui.$;
				var layer = layui.layer;
		
				// 登录校验6-16位密码
				$('#pwd')[0].onblur = function() {
					var pwdValue = this.value;
					if(!IsPwd(pwdValue)){
						layer.tips(
							'<p style="color:#fff;">请输入6-16位密码~~</p>',
							'#pwd',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				// 登录手机号或邮箱失去焦点验证
				$('#username')[0].onblur = function() {
					var usernameValue = this.value;
					if(!isTelCode(usernameValue)&&!IsEmail(usernameValue)){
						layer.tips(
							'<p style="color:#fff;">请输入正确的手机号或邮箱~~</p>',
							'#username',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				// 登录验证码
				$('#tpyzm')[0].onblur = function() {
					var tpValue = this.value;
					if(!tpValue){
						layer.tips(
							'<p style="color:#fff;">请输入验证码~~</p>',
							'#tpyzm',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				// 切换验证码
				$("#changeCode").click(function(){
					layer.alert("切换验证码！")
				})
				// 切换验证码
				$("#changeCode2").click(function(){
					layer.alert("切换验证码！")
				})
				// 登录
				$("#loginbt").click(function(){	
					if($('#username')[0].onblur()){
						if($('#pwd')[0].onblur()){
							if($('#tpyzm')[0].onblur()){
								window.open("modou.html")
							}
						}
					}					
				})
				document.getElementById('showblock1').onkeyup = function (e) {
					var ev = document.all ? window.event : e;
					if (ev.keyCode === 13) {
						$('#loginbt').click();
					}
				};
				
				
				
				// 注册校验6-16位密码
				$('#zcpwd')[0].onblur = function() {
					var zcpwdValue = this.value;
					if(!IsPwd(zcpwdValue)){
						layer.tips(
							'<p style="color:#fff;">请输入6-16位密码~~</p>',
							'#zcpwd',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				// 注册手机号或邮箱失去焦点验证
				$('#zcusername')[0].onblur = function() {
					var zcusernameValue = this.value;
					if(!isTelCode(zcusernameValue)&&!IsEmail(zcusernameValue)){
						layer.tips(
							'<p style="color:#fff;">请输入正确的手机号或邮箱~~</p>',
							'#zcusername',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				// 注册确认密码
				$('#zcrepwd')[0].onblur = function() {
					var zcrepwdValue = this.value;
					if(zcrepwdValue !== $('#zcpwd')[0].value){
						layer.tips(
							'<p style="color:#fff;">重复密码有误~~</p>',
							'#zcrepwd',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
					// 注册邮箱验证
				$('#zcemail')[0].onblur = function() {
					var zcemailValue = this.value;
					if(!IsEmail(zcemailValue)){
						layer.tips(
							'<p style="color:#fff;">请输入正确的邮箱~~</p>',
							'#zcemail',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				
				// 注册验证码
				$('#tpyzm1')[0].onblur = function() {
					var tpValue1 = this.value;
					if(!tpValue1){
						layer.tips(
							'<p style="color:#fff;">请输入验证码~~</p>',
							'#tpyzm1',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				
				// 注册呢称
				$('#zcname')[0].onblur = function() {
					var ncValue = this.value;
					if(!ncValue){
						layer.tips(
							'<p style="color:#fff;">请输入呢称~~</p>',
							'#zcname',
							{
								tips: [3, '#00cc90'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
				// 注册
				$("#regbt").click(function(){	
					if($('#zcusername')[0].onblur()){
						if($('#zcpwd')[0].onblur()){
							if($('#zcrepwd')[0].onblur()){
								if($('#zcemail')[0].onblur()){
									if($('#zcname')[0].onblur()){
										if($('#tpyzm1')[0].onblur()){
											window.open("modou.html")
										}
									}
								}
							}
						}
					}					
				})
				document.getElementById('showblock2').onkeyup = function (e) {
					var ev = document.all ? window.event : e;
					if (ev.keyCode === 13) {
						$('#regbt').click();
					}
				};
			})
			
			
		</script>
	</body>
</html>
